<template>
	<view class="uni_box login">
		<navbar title='账户信息' backgroundColor='#010101'>
		</navbar>
		<view class="content">
			<view class="list">
				<view class="item">
					<text class="name">昵称</text>
					<input class="iteminput isright" v-model="nickname" type="text" placeholder="请输入昵称" />
					<!-- <image src="@/static/h/rightback.png" mode="" class="rightback" ></image> -->
				</view>
				<view class="item">
					<text class="name">手机号</text>
					<input class="iteminput isright" v-model="phone" disabled="true" type="number" placeholder="请输入手机号" />
				</view>
				<view class="item" @click="copy()">
					<text class="name">链上地址</text>
					<input class="iteminput isright" type="text" v-model="address" disabled="true" placeholder="请输入链上地址" value="cfx:aaj84kxu2a7njaxbh3dn6antre2..." />
					<image src="@/static/h/copy.png" mode="" class="righticon"></image>
				</view>
			</view>
			<view class="duibtn" @click="realnamePost">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname:'',
				phone:'',
				address:''
			};
		},
		async onLoad() {
			let {
				user
			} = await this.$u.api.userInfo();
			// console.log(user)
			this.nickname = user.nickname
			this.phone = user.phone
			this.address = user.address
		},
		methods:{
			async realnamePost() {
				await this.$u.api.userEdit({
					nickname: this.nickname
				});
				this.$u.toast("昵称修改成功");
				setTimeout(() => {
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
				}, 1000);
			},
			// 复制功能
			copy() {
			  // 存储传递过来的数据
			  let wx = this.address;
			  let newInput = document.createElement("input");
			  newInput.value = wx;
			  document.body.appendChild(newInput);
			  newInput.select();
			  document.execCommand("Copy");
			  newInput.remove();
			  this.$u.toast('已复制~')
			},
		}
	}
</script>

<style scoped lang="scss">
  page{
  	background-color: #010101;
  }
  .content{
	  padding: 30rpx;
	  .duibtn{
	  		  width: 100%;
	  		  height: 88rpx;
	  		  background: linear-gradient(90deg, #9394F3 0%, #82E7CB 54%, #22FC94 100%);
	  		  border-radius: 8rpx;
	  		  opacity: 1;
	  		  display: flex;
	  		  align-items: center;
	  		  justify-content: center;
	  		  font-size: 32rpx;
	  		  font-family: PingFang SC-Bold, PingFang SC;
	  		  font-weight: bold;
	  		  color: #232323;
	  		  margin-top: 100rpx;
	  }
	  .list{
		  display: flex;
		  flex-direction: column;
		  .item{
			  display: flex;
			  flex-direction: row;
			  padding:32rpx  0;
			  border-bottom: 1rpx solid rgba(255, 255, 255, 0.5);
			  .iteminput{
				  text-align: right;
				  color: #fff;
				  font-size: 32rpx;
				  width: 65%;
			  }
			  .name{
				  font-size: 32rpx;
				  font-family: PingFang SC-Bold, PingFang SC;
				  font-weight: bold;
				  color: #FFFFFF;
			  }
			  .rightback{
				  width: 30rpx;
				  height: 40rpx;
				  margin-left: 18rpx;
			  }
			  .righticon{
				  width: 43rpx;
				  height: 46rpx;
				  margin-left: 18rpx;
			  }
			  .isright{
				  margin-left: auto;
			  }
		  }
		  .item:last-child{
			  border-bottom: none;
		  }
	  }
  }
  
</style>
